@use 'sass:math';

.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: orangered;
}

.header {
    background-color: transparent;
    color: white;
    flex-shrink: 0; /* 防止头部被压缩 */
}

.header-title {
	font-size: 40rpx;
}

.body {
    flex: 1;
	width: 700rpx;
    border-radius: 40rpx 40rpx 0 0;
    background-color: $app-header-bk-color;
    padding: 25rpx;
    overflow-y: auto; /* 如果内容过多，允许滚动 */
}

.card-img {
	width: 700rpx;
	height: 400rpx;
	background-color: pink;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 80rpx;
	margin-bottom: 25rpx;
}

.sorts, .tags, .cards-container {
	width: 700rpx;
	margin-bottom: 25rpx;
}

.sorts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 30rpx;
	margin-bottom: 10rpx;
}

.sort-seleter, .sort-speed, .sort-filter {
	display: flex;
	align-items: center;
}

.sort-seleter {
	padding-right: 240rpx;
}

.sort-icon {
	padding: 8rpx;
	$size: 20rpx;
	width: $size;
	height: $size;
}

.tags {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tags view {
	background-color: white;
	padding: 0 20rpx;
	height: 50rpx;
	font-size: 25rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card {
	width: 700rpx;
	height: 250rpx;
	background-color: white;
	border-radius: 26rpx;
	margin-bottom: 25rpx;
	display: flex;
}

.card-left {
	width: 250rpx;
	height: 250rpx;
}

.card-left-img {
	$size: 210rpx;
	width: $size;
	height: $size;
	border-radius: 20rpx;
	background-image: url("@/static/images/common/dish_default.png");
	background-size: 210rpx;
	background-repeat: no-repeat;
	// padding: 20rpx;
	margin: 20rpx 0 0 20rpx;
}

.card-right {
	width: 450rpx - 20;
	height: 250rpx - 40;
	margin: 20rpx 0 0 0rpx;
	border-radius: 20rpx;
	background-color: blanchedalmond;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}